<template>
  <el-container>
    <!--导航区域-->
    <el-header>
      <div class="box-head">
        <img src="../assets/imgs/logo.png">
      </div>
      <div class="info">
        <i class="el-icon-s-custom">：</i>
        <span>{{nickname}}</span>
        <el-button type="info" size="small" @click="logout">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeIndex" text-color="#fff"
                 active-text-color="#409EFF" router background-color="#333744">
          <el-menu-item index="/situationAwareness"
                        @click="changeActiveIndex('/situationAwareness')">态势感知</el-menu-item>
          <el-menu-item index="/visualization"
                        @click="changeActiveIndex('/visualization')">可视化展示</el-menu-item>
          <el-menu-item index="/logScanHost" @click="changeActiveIndex('/logScanHost')">日志扫描主机</el-menu-item>
          <el-menu-item index="/userManagement" @click="changeActiveIndex('/userManagement')">用户信息</el-menu-item>
        </el-menu>
      </el-aside>
      <!--内容区域-->
      <el-main>
        <!--路由占位符-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  // 每次刷新恢复到初始状态
  created() {
    if ( this.$route.path != "/situationAwareness") {
      this.$router.push("/situationAwareness");
    }
    this.getNickname();
  },
  data() {
    return {
      // 默认激活链接
      activeIndex: '/situationAwareness',
      // 用户名
      nickname: ''
    }
  },
  methods: {
    // 退出登录
    logout() {
      // 退出前判断登录是否超时，超时了就不执行了
      if (this.$cookies.isKey("status")) {
        this.$axios.get('/awareness/api/common/logout')
            .then(res => {
              // console.log(res);
              if (res.data.status.code == 1){
                // 销毁登录信息的cookie
                this.$cookies.remove("loginInfo");
                // 更新登录状态码为未登录状态
                this.$cookies.set("loginStatus", -2,0);
                this.$router.push("/login");
                this.$message.success('已退出登录！');
              }
            })
            .catch( err => {});
      } else {
        // 销毁登录信息的cookie
        this.$cookies.remove("loginInfo");
        // 更新登录状态码为未登录状态
        this.$cookies.set("loginStatus", -2,0);
        this.$router.push("/login");
        this.$message.success('已退出登录！');
      }
    },
    // 更改当前路由
    changeActiveIndex(activePath) {
      this.activeIndex = activePath;
    },
    // 获取当前用户信息
    getNickname() {
      var queryPhone = this.$cookies.get("loginInfo");
      this.$axios.get('/awareness/api/user/info',{
        params:{
          phone: queryPhone
        }
      }).then(res => {
        // console.log(res);
        this.nickname = res.data.result.data[0].nickname;
      }).catch( err => {

      });
    },
  },
}
</script>

<style scoped>
.el-container {
  height: 100%;
  overflow: auto;
}
.el-header {
  background-color: #282C34;
  padding: 0;
  color: white;
  font-size: 20px;
}

.el-aside {
  background-color: #333744;
}

.box-head {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 200px;
}

.el-main {
  background-color: #eaedf1;
}

.box-head  img {
  position: absolute;
  top: 50%;
  /*实现垂直居中*/
  transform:translateY(-50%);   /*不知道图片高度*/
}

.el-header .el-button {
  margin: 15px;
}
.info {
  float: right;
}

.el-aside .el-menu {
  /* 不写这个会出现选中的导航右边不对齐 */
  border-right: none;
}

/*修改全局的滚动条*/
/*滚动条的宽度*/
::-webkit-scrollbar {
  width: 8px;
}
/*滚动条的滑块*/
::-webkit-scrollbar-thumb {
  background-color: #344158;
  border-radius: 3px;
}

</style>